<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
    template="../templates/ui.xhtml">

	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">TreeTable - Selection</h1>

		<div class="entry">
			<p>TreeTable provides built-in selection for single(row click) and multiple(row click + metakey).</p>
			
			<h:form id="form">
                
                <p:growl id="messages" showDetail="true" />
	
				<p:treeTable value="#{documentsController.root}" var="document" id="singleSelect"
                             selection="#{documentsController.selectedNode}" selectionMode="single">

                    <f:facet name="header">
                        Single Selection
                    </f:facet>
                    
					<p:column style="width:150px">
						<f:facet name="header">
							Name
						</f:facet>
						<h:outputText value="#{document.name}" />
					</p:column>
					
					<p:column style="width:100px">
						<f:facet name="header">
							Size
						</f:facet>
						<h:outputText value="#{document.size}" />
					</p:column>
					
					<p:column style="width:100px">
						<f:facet name="header">
							Type
						</f:facet>
						<h:outputText value="#{document.type}" />
					</p:column>
                    
                    <f:facet name="footer">
                        <p:commandButton id="singleBtn" value="View" icon="ui-icon-search"
                                update=":form:documentPanel" oncomplete="documentDialog.show()"/>
                    </f:facet>
				</p:treeTable>
                
                <br />
                
                <p:treeTable value="#{documentsController.root}" var="document" id="multiSelect"
                             selection="#{documentsController.selectedNodes}" selectionMode="multiple">

                    <f:facet name="header">
                        Multiple Selection
                    </f:facet>
                    
					<p:column style="width:150px">
						<f:facet name="header">
							Name
						</f:facet>
						<h:outputText value="#{document.name}" />
					</p:column>
					
					<p:column style="width:100px">
						<f:facet name="header">
							Size
						</f:facet>
						<h:outputText value="#{document.size}" />
					</p:column>
					
					<p:column style="width:100px">
						<f:facet name="header">
							Type
						</f:facet>
						<h:outputText value="#{document.type}" />
					</p:column>
                    
                    <f:facet name="footer">
                        <p:commandButton value="View" icon="ui-icon-search"
                                update=":form:documentPanel" oncomplete="documentDialog.show()"/>
                    </f:facet>
				</p:treeTable>
				
				<p:dialog id="dialog" header="Document Detail" showEffect="fade" widgetVar="documentDialog" modal="true">
					<p:outputPanel id="documentPanel">
                        <h:panelGrid  columns="2" cellpadding="5" rendered="#{not empty documentsController.selectedNode}">
							<h:outputLabel for="name" value="Name: " />
							<h:outputText id="name" value="#{documentsController.selectedNode.data.name}" style="font-weight:bold" />
							
							<h:outputLabel for="size" value="Size: " />
							<h:outputText id="size" value="#{documentsController.selectedNode.data.size}" style="font-weight:bold" />
							
							<h:outputLabel for="type" value="Type " />
							<h:outputText id="type" value="#{documentsController.selectedNode.data.type}" style="font-weight:bold" />
						</h:panelGrid>
                        
                        <p:dataList value="#{documentsController.selectedNodes}" var="selectedNode" rendered="#{not empty documentsController.selectedNodes}">
                            #{selectedNode.data.name}
                        </p:dataList>
					</p:outputPanel>
				</p:dialog>
				
			</h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="treeTableSelection.xhtml">
					<pre name="code" class="xml">
&lt;h:form id="form"&gt;
                
    &lt;p:growl id="messages" showDetail="true" /&gt;

    &lt;p:treeTable value="\#{documentsController.root}" var="document"
                 selection="\#{documentsController.selectedNode}" selectionMode="single"&gt;

        &lt;f:facet name="header"&gt;
            Single Selection
        &lt;/f:facet&gt;

        &lt;p:column style="width:150px"&gt;
            &lt;f:facet name="header"&gt;
                Name
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{document.name}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column style="width:100px"&gt;
            &lt;f:facet name="header"&gt;
                Size
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{document.size}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column style="width:100px"&gt;
            &lt;f:facet name="header"&gt;
                Type
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{document.type}" /&gt;
        &lt;/p:column&gt;

        &lt;f:facet name="footer"&gt;
            &lt;p:commandButton value="View" icon="ui-icon-search"
                    update=":form:documentPanel" oncomplete="documentDialog.show()"/&gt;
        &lt;/f:facet&gt;
    &lt;/p:treeTable&gt;



    &lt;p:treeTable value="\#{documentsController.root}" var="document"
                 selection="\#{documentsController.selectedNodes}" selectionMode="multiple"&gt;

        &lt;f:facet name="header"&gt;
            Multiple Selection
        &lt;/f:facet&gt;

        &lt;p:column style="width:150px"&gt;
            &lt;f:facet name="header"&gt;
                Name
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{document.name}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column style="width:100px"&gt;
            &lt;f:facet name="header"&gt;
                Size
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{document.size}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column style="width:100px"&gt;
            &lt;f:facet name="header"&gt;
                Type
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{document.type}" /&gt;
        &lt;/p:column&gt;

        &lt;f:facet name="footer"&gt;
            &lt;p:commandButton value="View" icon="ui-icon-search"
                    update=":form:documentPanel" oncomplete="documentDialog.show()"/&gt;
        &lt;/f:facet&gt;
    &lt;/p:treeTable&gt;



    &lt;p:dialog header="Document Detail" showEffect="fade" widgetVar="documentDialog" modal="true"&gt;
        &lt;p:outputPanel id="documentPanel"&gt;
            &lt;h:panelGrid  columns="2" cellpadding="5" rendered="\#{not empty documentsController.selectedNode}"&gt;
                &lt;h:outputLabel for="name" value="Name: " /&gt;
                &lt;h:outputText id="name" value="\#{documentsController.selectedNode.data.name}" style="font-weight:bold" /&gt;

                &lt;h:outputLabel for="size" value="Size: " /&gt;
                &lt;h:outputText id="size" value="\#{documentsController.selectedNode.data.size}" style="font-weight:bold" /&gt;

                &lt;h:outputLabel for="type" value="Type " /&gt;
                &lt;h:outputText id="type" value="\#{documentsController.selectedNode.data.type}" style="font-weight:bold" /&gt;
            &lt;/h:panelGrid&gt;

            &lt;p:dataList value="\#{documentsController.selectedNodes}" 
                        var="selectedNode" rendered="\#{not empty documentsController.selectedNodes}"&gt;
                \#{selectedNode.data.name}
            &lt;/p:dataList&gt;
        &lt;/p:outputPanel&gt;
    &lt;/p:dialog&gt;

&lt;/h:form&gt;
					</pre> 
				</p:tab>
				
				<p:tab title="DocumentsController.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

import org.primefaces.examples.domain.Document;

public class DocumentsController implements Serializable {

	private TreeNode root;
    
    private TreeNode selectedNode;
    
    private TreeNode[] selectedNodes;
	
	public DocumentsController() {
		root = new DefaultTreeNode("root", null);
		
		TreeNode documents = new DefaultTreeNode(new Document("Documents", "-", "Folder"), root);
		TreeNode pictures = new DefaultTreeNode(new Document("Pictures", "-", "Folder"), root);
		TreeNode movies = new DefaultTreeNode(new Document("Movies", "-", "Folder"), root);
		
		TreeNode work = new DefaultTreeNode(new Document("Work", "-", "Folder"), documents);
		TreeNode primefaces = new DefaultTreeNode(new Document("PrimeFaces", "-", "Folder"), documents);
		
		//Documents
		TreeNode expenses = new DefaultTreeNode("document", new Document("Expenses.doc", "30 KB", "Word Document"), work);
		TreeNode resume = new DefaultTreeNode("document", new Document("Resume.doc", "10 KB", "Word Document"), work);
		TreeNode refdoc = new DefaultTreeNode("document", new Document("RefDoc.pages", "40 KB", "Pages Document"), primefaces);
		
		//Pictures
		TreeNode barca = new DefaultTreeNode("picture", new Document("barcelona.jpg", "30 KB", "JPEG Image"), pictures);
		TreeNode primelogo = new DefaultTreeNode("picture", new Document("logo.jpg", "45 KB", "JPEG Image"), pictures);
		TreeNode optimus = new DefaultTreeNode("picture", new Document("optimusprime.png", "96 KB", "PNG Image"), pictures);
		
		//Movies
		TreeNode pacino = new DefaultTreeNode(new Document("Al Pacino", "-", "Folder"), movies);
		TreeNode deniro = new DefaultTreeNode(new Document("Robert De Niro", "-", "Folder"), movies);
		
		TreeNode scarface = new DefaultTreeNode("mp3", new Document("Scarface", "15 GB", "Movie File"), pacino);
		TreeNode carlitosWay = new DefaultTreeNode("mp3", new Document("Carlitos' Way", "24 GB", "Movie File"), pacino);
		
		TreeNode goodfellas = new DefaultTreeNode("mp3", new Document("Goodfellas", "23 GB", "Movie File"), deniro);
		TreeNode untouchables = new DefaultTreeNode("mp3", new Document("Untouchables", "17 GB", "Movie File"), deniro);
	}
	
	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}

    public TreeNode getSelectedNode() {
        return selectedNode;
    }

    public void setSelectedNode(TreeNode selectedNode) {
        this.selectedNode = selectedNode;
    }

    public TreeNode[] getSelectedNodes() {
        return selectedNodes;
    }

    public void setSelectedNodes(TreeNode[] selectedNodes) {
        this.selectedNodes = selectedNodes;
    }
}
					</pre>
				</p:tab>
			</p:tabView>
		</div>

	</ui:define>
</ui:composition>